import React, { useRef, useState, useEffect } from 'react'
import { Modal, Form, Checkbox, Alert, Radio, Input } from 'antd'
import PropTypes from 'prop-types'
import style from './OperateConfirmModal.module.less'
import Text from '@components/Text'
const { Item } = Form
const { TextArea } = Input
// 获取默认数据
function getDefaultValue (list) {
  return list.filter(li => li.value && li.value !== 'select').map(li => li.key)
}

function getSelectValue (list) {
  return list.filter(li => li.value === 'select').map(li => li.key)
}

// 格式化文书列表
function formatOptions (list) {
  return list.map(li => {
    return {
      label: li.title,
      value: li.key,
      disabled: li.value !== 'select' && li.value
    }
  })
}

// 渲染文书列表选择器
function renderDocList (docList) {
  const options = formatOptions(docList)
  const selectOptions = options.filter(li => !li.disabled)
  const defaultOptions = options.filter(li => li.disabled)
  const allSelected = docList.every(li => li.value && li.value !== 'select')
  if (options.length === 0 || allSelected) {
    return null
  }
  return (
    <>
      {
        options.length > selectOptions.length && (
          <Item label='默认文书' name='defaultDocList' className={style.default}>
            <Text format={d => {
              return defaultOptions.map(li => li.label).join('、')
            }}
            />
          </Item>
        )
      }
      <Item label='可选文书' name='docList'>
        <Checkbox.Group options={selectOptions} />
      </Item>
    </>
  )
}

// 渲染备注
function renderRemark () {
  return (
    <Item label='备注' name='remark' rules={[{ required: true, message: '备注不能为空' }]}>
      <TextArea placeholder='请输入' rows={3} />
    </Item>
  )
}

// 渲染操作提示
function renderNotice (action) {
  if (!action || !action.alertmsg) {
    return null
  }
  return (
    <div className={style['notice-block']}>
      <Alert message={action.alertmsg} type='warning' showIcon />
      {action.employees ? <div className={style['operate-line']}>下一步操作者：{action.employees}</div> : null}
    </div>
  )
}

// 渲染紧急情况选择器
function renderUrgency (action) {
  const options = [{ label: '普通', value: 0 }, { label: '紧急', value: 1 }]
  if (!action || action.level === undefined) {
    return false
  }
  return (
    <Item label='紧急情况' name='level' rules={[{ required: true, message: '请选择紧急情况' }]}>
      <Radio.Group options={options} />
    </Item>
  )
}

function Main ({ visible, action, docList, title, onHide, onFinish }) {
  const formRef = useRef(null)
  const [initData, setInitData] = useState({})
  const [optAdd, setOptAdd] = useState('')
  useEffect(() => {
    const d = { defaultDocList: getDefaultValue(docList), docList: getSelectValue(docList) }
    if (action) {
      d.level = action.level
    }
    setInitData(d)
    if (formRef.current) {
      formRef.current.setFieldsValue(d)
    }
  }, [action, docList, formRef])
  useEffect(() => {
    if (action) {
      setOptAdd(action.opt_add)
    }
  }, [action])
  return (
    <Modal
      title={title}
      width='600px'
      open={visible}
      onCancel={onHide}
      onOk={() => formRef.current.submit()}
      destroyOnClose
      maskClosable={false}
    >
      <Form ref={formRef} initialValues={initData} onFinish={d => onFinish(d)}>
        {renderNotice(action)}
        {optAdd === 'cancel' ? renderRemark() : renderDocList(docList)}
        {renderUrgency(action)}
      </Form>
    </Modal>
  )
}

Main.proptypes = {
  visible: PropTypes.bool,
  onHide: PropTypes.func,
  onFinish: PropTypes.func,
  action: PropTypes.object,
  docList: PropTypes.array,
  title: PropTypes.string
}

Main.defaultProps = {
  visible: false,
  onHide: () => {},
  onFinish: () => {},
  action: null,
  docList: [],
  title: '提示'
}

export default Main
